﻿<!doctype html>
<html>
<head>
<title>autoiframe/b</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
*{margin:0; padding:0;}
body {font:12px Arial,Helvetica,sans-serif;}
#box { padding:10px; border:10px solid #CEE3E9; background:#F1F7F9;}
.btn { text-align:right;}
	.btn a { margin:0 5px; color:#555; font-size:22px; font-weight:700; }
</style>
</head>
<body>

<div id="box">
	<h1>autoiframe/b.html</h1>
	<div class="btn">
		<a href="javascript:void(0);" onclick="addHeight('200')">200</a>
		<a href="javascript:void(0);" onclick="addHeight('600')">600</a>
		<a href="javascript:void(0);" onclick="addHeight('900')">900</a>
	</div>
</div>


<script>
var sendMsg = function(d,url) {
	if(window.postMessage){
		parent.postMessage(d,url);//*
	}else{
		navigator.heightChange(d);
	}
}

//get page height
var getHeight= function() {
	var container = document.compatMode == 'CSS1Compat'? document.documentElement : document.body;
    if(document.all){//IE+
        return document.body.clientHeight;
    }else {//FF,Opera,Chrome
        return Math.min(container.scrollHeight, container.offsetHeight);
    }
}


//change height
sendMsg(getHeight(), 'http://demo.byzuo.com/autoiframe/index.html');
var addHeight = function(h) {
    document.getElementById('box').style.height = h + 'px';
    sendMsg(getHeight(), 'http://demo.byzuo.com/autoiframe/index.html');
};

</script>
</body>
</html>
